<template>
	<view>
		<view class="bj">
			<u-navbar title="我的订单" :autoBack="true" bgColor="#3284fc"
				titleStyle="font-size:18px; color:white;height:44px;line-height:44px" leftIconColor="#fff">
			</u-navbar>
			<view class="cd">
				<view @click="selectTab('quanbu','待评价')">全部</view>
				<view @click="selectTab('zhifu','待支付')">待支付</view>
				<view @click="selectTab('shiyong','待使用')">待使用</view>
				<view @click="selectTab('pingjia','待评价')">待评价</view>
			</view>

			<view v-if="currentTab === 'quanbu'">
				<u-cell-group v-for="(item,index) in orderList" :key="index" :border="false"
					:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'10px auto',width:'350px'}">

					<u-cell :isLink="true">
						<template v-slot:title>
							<span style="font-weight: 600;">订单编号:{{item.number}}</span>
						</template>
					</u-cell>
					<view class="nr">
						<navigator @click="qw(item.id,item.state)">
							<view>服务项目：
								<span v-if="item.serviceList != null">
									{{item.serviceList[0].name}}
								</span>
							</view>
							<view class="pj">
								<view>服务门店：
									<span v-if="item.shop != null">
										{{item.shop.storeName }}
									</span>
								</view>
								<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==0">待支付</view>
								<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==1">待服务</view>
								<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==2">待评价</view>
								<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==3">已取消</view>
								<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==4">已退款</view>
								<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==5">已评价</view>
							</view>
							<view>下单时间：{{item.createTime}}</view>

						</navigator>
						<view class="an">
							<view>应付款：{{item.totalPrice}}</view>
							<view class="an1">
								<view v-if="item.state==0">
									<u-button text="取消支付" @click="qxzf(item)"
										style="background-color: #c0c0c0;"></u-button>
								</view>
								<view v-if="item.state==0">
									<u-button text="立即支付" style="background-color: #1e72f1;"></u-button>
								</view>
								<view v-if="item.state==1">
									<u-button @click="sqtk(item)" text="申请退款"
										style="background-color: #c0c0c0;"></u-button>
								</view>
								<view v-if="item.state==1">
									<u-button text="扫码结算" style="background-color: #1e72f1;"></u-button>
								</view>
								<view v-if="item.state==2">
									<u-button text="立即评价" style="background-color: #c0c0c0;"></u-button>
								</view>
								<view v-if="item.state==2">
									<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
								</view>
								<view v-if="item.state==3">
									<u-button text="重新下单" style="background-color: #1e72f1;"></u-button>
								</view>
								<view v-if="item.state==4">
									<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
								</view>
								<view v-if="item.state==5">
									<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
								</view>
							</view>
						</view>
					</view>

				</u-cell-group>
			</view>

			<view v-if="currentTab === 'zhifu'">
				<u-cell-group :border="false" v-for="(item,index) in orderList" :key="index"
					:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'10px auto',width:'350px'}">
					<view v-if="item.state==0">
						<u-cell :isLink="true">
							<template v-slot:title>
								<span style="font-weight: 600;">订单编号:{{item.number}}</span>
							</template>
						</u-cell>
						<view class="nr">
							<navigator @click="qw(item.id,item.state)">
								<view>服务项目：
									<span v-if="item.serviceList != null">
										{{item.serviceList[0].name}}
									</span>
								</view>
								<view class="pj">
									<view>服务门店：
										<span v-if="item.shop != null">
											{{item.shop.storeName }}
										</span>
									</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==0">待支付</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==1">待服务</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==2">待评价</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==3">已取消</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==4">已退款</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==5">已评价</view>
								</view>
								<view>下单时间：{{item.createTime}}</view>
							</navigator>
							<view class="an">
								<view>应付款：{{item.totalPrice}}</view>
								<view class="an1">
									<view v-if="item.state==0">
										<u-button @click="qxzf(item)" text="取消支付" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==0">
										<u-button text="立即支付" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==1">
										<u-button text="申请退款" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==1">
										<u-button text="扫码结算" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==2">
										<u-button text="立即评价" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==2">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==3">
										<u-button text="重新下单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==4">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==5">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-cell-group>
			</view>
			<view v-if="currentTab === 'shiyong'">
				<u-cell-group :border="false" v-for="(item,index) in orderList" :key="index"
					:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'5px auto',width:'350px'}">
					<view v-if="item.state==1">
						<u-cell :isLink="true">
							<template v-slot:title>
								<span style="font-weight: 600;">订单编号:{{item.number}}</span>
							</template>
						</u-cell>
						<view class="nr">
							<navigator @click="qw(item.id,item.state)">
								<view>服务项目：
									<span v-if="item.serviceList != null">
										{{item.serviceList[0].name}}
									</span>
								</view>
								<view class="pj">
									<view>服务门店：
										<span v-if="item.shop != null">
											{{item.shop.storeName }}
										</span>
									</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==0">待支付</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==1">待服务</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==2">待评价</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==3">已取消</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==4">已退款</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==5">已评价</view>
								</view>
								<view>下单时间：{{item.createTime}}</view>
							</navigator>
							<view class="an">
								<view>应付款：{{item.totalPrice}}</view>
								<view class="an1">
									<view v-if="item.state==0">
										<u-button text="取消支付" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==0">
										<u-button text="立即支付" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==1">
										<u-button @click="sqtk(item)" text="申请退款" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==1">
										<u-button text="扫码结算" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==2">
										<u-button text="立即评价" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==2">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==3">
										<u-button text="重新下单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==4">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==5">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-cell-group>
			</view>
			<view v-if="currentTab === 'pingjia'">
				<u-cell-group :border="false" v-for="(item,index) in orderList" :key="index"
					:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'10px auto',width:'350px'}">
					<view v-if="item.state==2">
						<u-cell :isLink="true">
							<template v-slot:title>
								<span style="font-weight: 600;">订单编号:{{item.number}}</span>
							</template>
						</u-cell>
						<view class="nr">
							<navigator @click="qw(item.id,item.state)">
								<view>服务项目：
									<span v-if="item.serviceList != null">
										{{item.serviceList[0].name}}
									</span>
								</view>
								<view class="pj">
									<view>服务门店：
										<span v-if="item.shop != null">
											{{item.shop.storeName }}
										</span>
									</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==0">待支付</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==1">待服务</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==2">待评价</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==3">已取消</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==4">已退款</view>
									<view style="color: #3082fc;margin-left: 150px;" v-if="item.state==5">已评价</view>
								</view>
								<view>下单时间：{{item.createTime}}</view>
							</navigator>
							<view class="an">
								<view>应付款：{{item.totalPrice}}</view>
								<view class="an1">
									<view v-if="item.state==0">
										<u-button text="取消支付" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==0">
										<u-button text="立即支付" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==1">
										<u-button text="申请退款" style="background-color: #c0c0c0;"></u-button>
									</view>
									<view v-if="item.state==1">
										<u-button text="扫码结算" style="background-color: #1e72f1;"></u-button>
									</view>
									<navigator @click="tz(item.id)" v-if="item.state==2">
										<u-button text="立即评价" style="background-color: #c0c0c0;"></u-button>
									</navigator>
									<view v-if="item.state==2">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==3">
										<u-button text="重新下单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==4">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
									<view v-if="item.state==5">
										<u-button text="再来一单" style="background-color: #1e72f1;"></u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-cell-group>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shi: "待支付",
				currentTab: 'quanbu', // 默认选项卡
				userId: '',
				orderList: [],
				queryParams: {
					pageNum: null,
					pageSize: null,
					number: null,
					shopId: null,
					carId: null,
					userId: null,
					serviceId: null,
					totalPrice: null,
					realPrice: null,
					verificationCode: null,
					verificationTime: null,
					subscribeTime: null,
					createTime: null,
					state: null,
				},
			}
		},
		onLoad(e) {
			this.selectTab(e.a, e.b);
			this.getOrder()
		},
		methods: {
			sqtk(item) {
				let that = this;
				uni.showModal({
					content: '退款后将原路返回到支付账户，请确认是否退款吗',
					success: function(res) {
						if (res.confirm) {
							item.state = 4;
							that.$http({
								url: 'api/order/order',
								method: 'PUT',
								data: item,
								success(res) {
									console.log(res)
								}
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			qxzf(item) {
				let that = this;
				uni.showModal({
					content: '确定要取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							item.state = 3;
							that.$http({
								url: 'api/order/order',
								method: 'PUT',
								data: item,
								success(res) {
									console.log(res)
								}
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

			tz(id) {
				uni.navigateTo({
					url: '/pages/my/qcby/qcby?orderId=' + id + '&userId=' + this.getCookie('userid')
				})
			},
			selectTab(tab, dd) {
				this.currentTab = tab;
				this.shi = dd;
			},
			getCookie(name) {
				const nameEQ = name + "=";
				const cookies = document.cookie.split(';');
				for (let i = 0; i < cookies.length; i++) {
					let c = cookies[i].trim();
					if (c.indexOf(nameEQ) === 0) {
						return decodeURIComponent(c.substring(nameEQ.length));
					}
				}
				return null;
			},
			getOrder() {
				let that = this;
				this.$http({
					url: 'api/order/order/' + that.getCookie('userid'),
					method: 'GET',
					success(res) {
						// console.log(res)
						that.queryParams.userId = res.data.data.userId
						// console.log(that.queryParams.userId)
						that.getOrderList()
					}
				})
			},
			getOrderList() {
				let that = this;
				this.$http({
					url: 'api/order/order/list',
					method: 'GET',
					data: that.queryParams,
					success(res) {
						console.log(res)
						that.orderList = res.data.rows
					}
				})
			},
			qw(id, state) {
				if (state == 0) {
					uni.navigateTo({
						url: '/pages/my/dzf/dzf?id=' + id
					})
				} else if (state == 1) {
					uni.navigateTo({
						url: '/pages/my/dsy/dsy?id=' + id
					})
				} else if (state == 2) {
					uni.navigateTo({
						url: '/pages/my/dpj/dpj?id=' + id
					})
				} else if (state == 3) {
					uni.navigateTo({
						url: '/pages/my/yqx/yqx?id=' + id
					})
				} else if (state == 4) {
					uni.navigateTo({
						url: '/pages/my/ytk/ytk?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/ywc/ywc?id=' + id
					})
				}
			}
		}
	}
</script>

<style scoped>
	.nr {
		margin: 5px 10px;
		line-height: 30px;
	}

	.an {
		display: flex;
		justify-content: space-between;
		margin: 20px 0;
	}

	.an1 {
		display: flex;
	}

	.an1 .u-button {
		border-radius: 5px;
		height: 30px;
		width: 80px;
		color: #fff;
		margin-left: 10px;

	}

	.pj {
		display: flex;
	}

	.cd {
		display: flex;
		justify-content: space-around;
		color: #ffffff;
		font-size: 16px;
	}

	.bj {
		width: 100%;
		height: 150px;
		background-color: #3384fc;
		margin-top: 44px;
	}
</style>